<template>
  <el-dialog
    title="JSON编辑器"
    :visible.sync="dialogVisible"
    width="60%"
    :before-close="handleClose">
    <b-code-editor
      ref="editor"
      v-model="json"
      :indent-unit="4"
      height="400px"
      @on-opened="$refs.editor.refresh()" ></b-code-editor>
    <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="ok">确 定</el-button>
  </span>
  </el-dialog>
</template>

<script>
  export default {
    name: "index",
    data() {
      return {
        //显示标识
        dialogVisible: false,
        //数据
        json:null,
      }
    },
    methods: {

      //确认json
      ok(){
        try {
          let obj = JSON.parse(this.json);
          this.dialogVisible = false
          this.$emit('ok',obj);
        } catch (e) {
          this.$message({
            message: '输入格式不合法!',
            type: 'warning'
          });
        }

      },

      //打开弹窗
      open(obj){
        console.log(JSON.stringify(obj));
        this.json=JSON.stringify(obj);
        this.dialogVisible=true;
        this.$nextTick(() => {
          //格式化
          this.$refs.editor.formatCode()
        })

      },

      //关闭弹窗回调
      handleClose(done){
        done();
      },
    }
  }
</script>

<style scoped>

</style>
